page {
    font-size: 14px;
}

.page-container {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

// 放大
.btn-animation {
    animation: btnAnimation 0.25s;
}

@keyframes btnAnimation {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

// 振动
.vibrate {
    animation: startVibrate 0.2s;
}

@keyframes startVibrate {
    25% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }

    75% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

// 手机安全距离
.safe-top {
    padding-top: env(safe-area-inset-top);
}

.safe-left {
    padding-left: env(safe-area-inset-left);
}

.safe-right {
    padding-right: env(safe-area-inset-right);
}

.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

// 文字省略
.text-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

// 字体对齐
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

// 字体颜色
.color-content {
    color: #fff;
}

.color-page {
    color: #5b5b5b;
}

.color-none {
    color: #c0c4cc;
}

.color-primary {
    color: #2979ff !important;
}

.color-main {
    color: #c58bf2 !important;
}

.color-success {
    color: #19be6b !important;
}

.color-warning {
    color: #ff9900 !important;
}

.color-error {
    color: #fa3534 !important;
}

.color-info {
    color: #909399 !important;
}

.color-gold {
    color: #f9ae3d !important;
}

.color-integral {
    color: #ff5b5b !important;
}

// 字体大小
.font-small {
    font-size: 12px;
}

.font-high {
    font-size: 24px
}

.font-big {
    font-size: 18px;
}

.font-middle {
    font-size: 14px;
}

.page-box {
    background: #fff;
    box-shadow: 0 0 6px 0 #eee;
    border-radius: 12px;
}

.safe-container {
    padding: 0 12px;
}

.mt {
    margin-top: 12px;
}

image {
    height: 0;
}